import 'package:flutter/material.dart';
import 'package:gzx_dropdown_menu/gzx_dropdown_menu.dart';
import 'package:ost_flutter_module/class/store/course_page/widgets/store_course_drop_item.dart';

class StoreTabBar extends StatefulWidget {
  StoreTabBar({Key key}) : super(key: key);

  @override
  _StoreTabBarState createState() => _StoreTabBarState();
}

class _StoreTabBarState extends State<StoreTabBar> {
  List<String> _dropDownHeaderItemStrings = ['全城', '品牌', '距离近', '筛选'];
  List<SortCondition> _brandSortConditions = [];
  List<SortCondition> _distanceSortConditions = [];
  SortCondition _selectBrandSortCondition;
  SortCondition _selectDistanceSortCondition;
  GZXDropdownMenuController _dropdownMenuController =
      GZXDropdownMenuController();

  var _scaffoldKey = new GlobalKey<ScaffoldState>();
  GlobalKey _stackKey = GlobalKey();

  String _dropdownMenuChange = '';

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _brandSortConditions.add(SortCondition(name: '全部', isSelected: true));
    _brandSortConditions.add(SortCondition(name: '金逸影城', isSelected: false));
    _brandSortConditions
        .add(SortCondition(name: '中影国际城我比较长，你看我选择后是怎么显示的', isSelected: false));
    _brandSortConditions.add(SortCondition(name: '星美国际城', isSelected: false));
    _brandSortConditions.add(SortCondition(name: '博纳国际城', isSelected: false));
    _brandSortConditions.add(SortCondition(name: '大地影院', isSelected: false));
    _brandSortConditions.add(SortCondition(name: '嘉禾影城', isSelected: false));
    _brandSortConditions.add(SortCondition(name: '太平洋影城', isSelected: false));
    _brandSortConditions.add(SortCondition(name: '万达影城', isSelected: false));
    _brandSortConditions.add(SortCondition(name: '万达影城1', isSelected: false));
    _brandSortConditions.add(SortCondition(name: '万达影城2', isSelected: false));
    _brandSortConditions.add(SortCondition(name: '万达影城3', isSelected: false));

    _selectBrandSortCondition = _brandSortConditions[0];

    _distanceSortConditions.add(SortCondition(name: '距离近', isSelected: true));
    _distanceSortConditions.add(SortCondition(name: '价格低', isSelected: false));
    _distanceSortConditions.add(SortCondition(name: '价格高', isSelected: false));

    _selectDistanceSortCondition = _distanceSortConditions[0];
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      key: _stackKey,
      children: <Widget>[
        GZXDropDownHeader(
          // 下拉的头部项，目前每一项，只能自定义显示的文字、图标、图标大小修改
          items: [
            GZXDropDownHeaderItem(_dropDownHeaderItemStrings[0]),
            GZXDropDownHeaderItem(
              _dropDownHeaderItemStrings[1],
              iconData: Icons.keyboard_arrow_down,
              iconDropDownData: Icons.keyboard_arrow_up,
            ),
            GZXDropDownHeaderItem(
              _dropDownHeaderItemStrings[2],
              style: TextStyle(color: Colors.green),
              iconData: Icons.arrow_upward,
              iconDropDownData: Icons.arrow_downward,
            ),
            GZXDropDownHeaderItem(
              _dropDownHeaderItemStrings[3],
              iconData: Icons.filter_frames,
              iconSize: 18,
            ),
          ],
          // GZXDropDownHeader对应第一父级Stack的key
          stackKey: _stackKey,
          // controller用于控制menu的显示或隐藏
          controller: _dropdownMenuController,
          // 当点击头部项的事件，在这里可以进行页面跳转或openEndDrawer
          onItemTap: (index) {},
//                // 文字样式
          style: TextStyle(color: Color(0xFF666666), fontSize: 14),
//                // 下拉时文字样式
          dropDownStyle: TextStyle(
            fontSize: 14,
            color: Theme.of(context).primaryColor,
          ),
        ),
        Positioned(
          top: 50,
          child:Container(color: Colors.blue,height: 200,),
          //  ListView.separated(
          //   itemCount: 10,
          //   separatorBuilder: (BuildContext context, int index) =>
          //       Divider(height: 1.0),
          //   itemBuilder: (BuildContext context, int index) {
          //     return GestureDetector(
          //       child: ListTile(
          //         leading: Text('test$index'),
          //       ),
          //       onTap: () {},
          //     );
          //   },
          // ),
        ),
        // 下拉菜单，注意GZXDropDownMenu目前只能在Stack内，后续有时间会改进，以及支持CustomScrollView和NestedScrollView
//           GZXDropDownMenu(
//             // controller用于控制menu的显示或隐藏
//             controller: _dropdownMenuController,
//             // 下拉菜单显示或隐藏动画时长
//             animationMilliseconds: 300,
//             // 下拉后遮罩颜色
// //          maskColor: Theme.of(context).primaryColor.withOpacity(0.5),
// //          maskColor: Colors.red.withOpacity(0.5),
//             dropdownMenuChanging: (isShow, index) {
//               setState(() {
//                 _dropdownMenuChange = '(正在${isShow ? '显示' : '隐藏'}$index)';
//                 print(_dropdownMenuChange);
//               });
//             },
//             dropdownMenuChanged: (isShow, index) {
//               setState(() {
//                 _dropdownMenuChange = '(已经${isShow ? '显示' : '隐藏'}$index)';
//                 print(_dropdownMenuChange);
//               });
//             },
//             // 下拉菜单，高度自定义，你想显示什么就显示什么，完全由你决定，你只需要在选择后调用_dropdownMenuController.hide();即可
//             menus: [
//               GZXDropdownMenuBuilder(
//                   dropDownHeight: 40 * 8.0,
//                   dropDownWidget: Container(
//                     color: Colors.red,
//                   )),
//               GZXDropdownMenuBuilder(
//                   dropDownHeight: 40 * 8.0, dropDownWidget: Container()),
//               GZXDropdownMenuBuilder(
//                   dropDownHeight: 40.0 * _distanceSortConditions.length,
//                   dropDownWidget: Container()),
//               GZXDropdownMenuBuilder(
//                   dropDownHeight: 40.0 * _distanceSortConditions.length,
//                   dropDownWidget: Container()),
//             ],
//           ),
      ],
    );
  }
}
